<template>
  <div style="position: fixed;top: 0;bottom:0;width: 100%;background: #002253;z-index:1;left:0"></div>

  <div
      style="position:absolute;top:30%;left:50%;margin-top:-60px;margin-left:-230px;width:460px;height:400px;border-radius:8px;background:#FFF;box-shadow: 0 5px 20px 0 rgba(0,34,77,.5);z-index:9;">
    <div style="height:80px;width:100%;line-height:80px;font-weight:bold;margin-top:40px;">
      <span style="margin-left:40px;margin-top:20px;font-size:24px;color:#333;">后台管理</span>
    </div>
    <div style="padding:20px 40px;min-height:100px;">

      <div style="position:relative;margin-bottom:16px;" v-for="item in dynamicForm" :key="item.field">
        <i :class="item.field" class="icon"
           style="position:absolute;left:0;top:0;width:50px;height:50px;background-size:60%;"></i>
        <div
            style="position:absolute;left:0;top:15px;color:#777;font-size:20px;border-right:1px solid #ccc;height:22px;width:52px;text-align:center;"></div>
        <input :type="item.field === 'password' ? 'password':'text'"
               :placeholder="item.label" v-model="item.value"
               style="background-color:#FFF;border:1px solid #e5e6e7;color:inherit;display:block;padding:0 12px 0 72px;-webkit-transition:border-color .3s ease-in-out 0s,box-shadow .3s ease-in-out 0s;transition:border-color .3s ease-in-out 0s,box-shadow .3s ease-in-out 0s;width:100%;height:50px;font-size:16px;border-radius:5px;box-sizing:border-box;"/>
      </div>

      <button
          style="display:inline-block;margin-top:5px;width:100%;height:50px;outline:0;border:1px solid #3E475D;border-radius:5px;background:#3E475D none repeat scroll 0 0;color:#fff;text-align:center;text-decoration:none;text-transform:none;cursor:pointer"
          :loading="isLogging" @click="loginSubmit">
        <span style="font-size: 16px">登录</span>
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, UnwrapRef, ref, reactive} from 'vue'
import http from '@/plugin/http'
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'

export default defineComponent({

  name: 'login',

  setup() {
    const router = useRouter();
    const store = useStore()
    const isLogging = ref(false)
    const dynamicForm: UnwrapRef<Record<string, string>[]> = reactive([
      {label: '账号', value: '', field: 'account', type: 'input'},
      {label: '密码', value: '', field: 'password', type: 'password'},
    ])

    // 提交登录
    const loginSubmit = async (): Promise<void> => {
      let form: Record<string, unknown> = {}
      dynamicForm.forEach((item: Record<string, string>) => {
        form[item.field] = item.value
      })
      isLogging.value = true
      const res: Record<any, any> = await http.post('/login', form)
      if (res.data.code !== 0) {
        ElMessage.error(res.data.message)
      } else {
        store.commit('setLoginToken', res.data.data.token || '')
        await router.push({path: '/'})
      }
    }
    return {
      isLogging,
      dynamicForm,
      loginSubmit
    }
  }
})
</script>

<style scoped>
input:focus {
  border-color: #3E475D
}

.icon {
  background: url("") no-repeat center center;
}

.icon.password {
  background-image: url("")
}
</style>
